<template>
  <div>
    <h1>会员表展示</h1>
    <div>
      会员名称<input type="text" v-model="info.naem"/>
      会员年龄<input type="text" v-model="info.ag1"/>-<input type="text" v-model="info.age2"/>
      会员等级
      <select v-model="info.levle">
        <option value="">请选择</option>
        <option :value="i.Id" v-for="i in data1.list">{{i.LevelName}}</option>
      </select>
      <input type="button" class="btn btn-primary" value="查询" @click="getlist"/>
    </div>
    <table class="table table-bordered">
      <tbody>
      <tr style="background:skyblue;">
        <td>会员名称</td>
        <td>会员年纪</td>
        <td>会员头像</td>
        <td>会员电话</td>
        <td>会员等级</td>
        <td>会员状态</td>
        <td>操作</td>
      </tr>
      <tr v-for="i in data.list" :key="i.Id">
        <td>{{i.MeberName}}</td>
        <td>{{i.MeberAge}}</td>
        <td><img :src="i.Photo" width="100" height="100"/></td>
        <td>{{i.Phone}}</td>
        <td>{{i.LevelName}}</td>
        <td>{{i.State?"启用":"禁用"}}</td>
        <td>
          <input type="button" class="btn btn-danger" value="修改" @click="upd(i.Id)"/>
          <input type="button" class="btn btn-warning" value="修改状态"  @click="sta(i.Id)"/>
        </td>
      </tr>
      </tbody>
    </table>

    <div>

    </div>
    <span>共<b>{{data.totalcount}}</b>条</span>
    <span>共<b>{{data.totalpage}}</b>页</span>
    <span>当前<b>{{info.pageindex}}</b></span>/<span><b>{{data.totalpage}}</b>页</span>

    <input type="button" class="btn btn-success" value="首页" @click="page(1)"/>
    <input type="button" class="btn btn-success" value="上一页" @click="page(info.pageindex-1)"/>
    <span v-for="i in data.totalpage" @click="page(i)">{{i}}</span>
    <input type="button" class="btn btn-success" value="下一页" @click="page(info.pageindex+1)"/>
    <input type="button" class="btn btn-success" value="尾页" @click="page(data.totalpage)"/>

    <input type="number" v-model="info.pageindex"/>
    <input type="button" value="跳转" @click="page(info.pageindex)" class="btn btn-success"/>
    <select v-model="info.pagesiez" @change="getlist">
      <option value="">请选择</option>
      <option v-for="i in arr" :value="i">当前{{i}}条</option>
    </select>
  </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import axios from "axios";
import moment from "moment";
import {useRoute,useRouter} from "vue-router";
const router = useRouter()
const route = useRoute()



const upd=(id:any)=>{
  router.push({
    path:'/updateMember',
    query:{id:id},
  })
}

let arr:any=ref([2,4,6,8])
const page=(num:any)=>{
  if(num<1)
  {
    info.pageindex=1
    return;
  }
  if(num>data.totalpage)
  {
    info.pageindex=data.totalpage
    return;
  }
  info.pageindex=num
  getlist();
}
onMounted(() => {
  getlist();
  getlist1();
})

//接受数据
let data:any=reactive({
  totalcount:"",
  totalpage:'',
  list:[]
})
//发送数据
let info:any=reactive({
  pageindex:1,
  pagesiez:2,
  naem:"",
  ag1:"",
  age2:"",
  levle:"",
})
const getlist=()=>{
  axios({
    url:"https://localhost:7032/api/User/GetMember",
    method:"get",
    params:info,
  }).then(res=>{
    console.log(res)
    data.list=res.data.list;
    data.totalcount = res.data.totalcount;
    data.totalpage = res.data.totalpage;
  })
}
const del=(id:any)=> {
  let f = confirm("确认删除")
  if (f) {
    axios({
      url: "https://localhost:7032/api/User/DelLevel",
      method: "delete",
      params: {id: id}
    }).then(res => {
      console.log(res)
      if (res.data > 0) {
        alert("删除成功")
        getlist();
        return;
      } else {
        alert("删除失败")
        return;
      }
    })
  }
}
const sta=(id:any)=> {
  let f = confirm("确认修改")
  if (f) {
    axios({
      url: "https://localhost:7032/api/User/StateMember",
      method: "put",
      params: {id: id}
    }).then(res => {
      console.log(res)
      if (res.data > 0) {
        alert("修改成功")
        getlist();

      } else {
        alert("修改失败")
        return;
      }
    })
  }
}




//接受数据
let data1:any=reactive({
  totalcount:"",
  totalpage:'',
  list:[]
})
//发送数据
let info1:any=reactive({
  pageindex:1,
  pagesiez:10,
  level:"",
  reigh:"",
})
const getlist1=()=>{
  axios({
    url:"https://localhost:7032/api/User/GetLevel",
    method:"get",
    params:info1,
  }).then(res=>{
    console.log(res)
    data1.list=res.data.list;
    data1.totalcount = res.data.totalcount;
    data1.totalpage = res.data.totalpage;
  })
}
</script>

<style scoped>
span{
  margin: 0 10px;

}
b{
  color:red;
}
</style>